<template>



    <div class="background_classify" style="display: flex; justify-content: space-between;">
        <div class="community_title">
            <h3 class="title">Hi，欢迎来到壁纸社区</h3>
            <span class="subtitle">发现更多好壁纸</span>
        </div>
        <div>
            <button @click="classifyActive = 0" :class="{ 'classify_btn_active': classifyActive == 0 }"
                class="classify_btn">推荐</button>
            <button @click="classifyActive = 1" :class="{ 'classify_btn_active': classifyActive == 1 }"
                class="classify_btn">最新</button>
            <button @click="classifyActive = 2" :class="{ 'classify_btn_active': classifyActive == 2 }"
                class="classify_btn">收藏最多</button>
            <button @click="classifyActive = 3" :class="{ 'classify_btn_active': classifyActive == 3 }"
                class="classify_btn">点赞最多</button>
        </div>
    </div>
    <div style="display: block;">
        <CommunityItem></CommunityItem>
    </div>

</template>

<script>
import CommunityItem from '@/components/CommunityItem.vue';
export default {
    data() {
        return {
            classifyActive: 0,
            menu_index: '1-3'
        }
    }, components: {
        CommunityItem
    }
}
</script>

<style scoped>
.community_title {
    display: flex;
    align-items: flex-end;
}

.title {
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    margin: 0 12px;
}

.subtitle {
    font-size: 14px;
    font-weight: 400;
    color: #c5c5c5;
}
</style>